@page "/maps/osm-sublayer"

@using Syncfusion.Blazor.Maps

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the location of Africa continent in the World map.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render the geometric layers as sublayer on the OpenStreetMap. The outline of Africa continent is rendered using GeoJSON data on the top of the OpenStreetMap.</p>
   <p>More information about OpenStreetmaps can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/providers/openstreetmap'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsZoomSettings Enable="true"/>
        <MapsTitleSettings Text="Location of Africa continent in the World map">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
        <MapsLayers>
            <MapsLayer LayerType="ShapeLayerType.OSM" TValue="string"/>
            <MapsLayer Type="Syncfusion.Blazor.Maps.Type.SubLayer" ShapeData='new {dataOptions ="data/maps/africa.json"}' TValue="string">
                <MapsShapeSettings Fill="#5100a3" Opacity="0.4"/>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
    <div class="urllink">
        <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>
    </div>
    <br />
    <div class="urllink">
        Source:
        <a href="https://www.whatarethe7continents.com/biggest-largest-smallest-continents/" target="_blank">Seven Continents</a>
    </div>
</div>